<template>
  <view class="page" id="equipment-detail">
    <view class="page-head white">
      <view class="card-box">
        <view class="head">
          <image
            :src="
              imgBaseUrlV2 +
              (dataInfo.online != 3 ? 'home_wifi.png' : 'home_wifi_no.png')
            "
            class="image"
            mode="widthFix"
          />

          {{ dataInfo.online != 3 ? "在线" : "离线" }}
        </view>

        <view class="body">
          <view class="title"> {{ dataInfo.device_name }} </view>

          <view class="ft">
            <view class="item" @click="onClickLook"
              >设备档案： <text class="link">去查看</text>
            </view>
            <view class="item"
              >维保结束日期：{{ dataInfo.service_end_time }}</view
            >
          </view>
        </view>
      </view>

      <view class="tab-box">
        <Tab :tabs="tabs" :current="currentTab" @change="onChangeTab"></Tab>
      </view>
    </view>

    <!-- <swiper class="swiper"> -->
    <!-- <swiper-item class="swiper-item"> -->
    <view class="panel">
      <!-- <Base ref="base" v-if="tabs[0].cache" v-show="!currentTab"></Base> -->
      <!-- <Work ref="work" v-if="tabs[1].cache" v-show="currentTab === 1"></Work> -->
      <!-- <Oil ref="oil" v-if="tabs[2].cache" v-show="currentTab === 2"></Oil> -->
    </view>

    <cover-view class="cover-view">
      <cover-view class="item">
        <button class="btn btn-default">日常点检</button>
      </cover-view>
      <cover-view class="item">
        <button class="btn btn-primary">立即维护</button>
      </cover-view>
    </cover-view>
    <!-- </swiper-item> -->
    <!-- </swiper> -->

    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { getEquipmentInfo } from "@/common/api/equipment.js";
import waveBall from "@/components/waveball/waveball";
import popupLoading from "@/components/public/loading/popup";
import xModal from "@/components/public/x-modal/x-modal";
import { mapState } from "vuex";
import { debounce } from "@/utils";
import { delayFunc } from "@/common/util";
import Router from "@/common/js/router";
import {
  imgBaseUrl,
  imgBaseUrlV1,
  imgBaseUrlV0,
  imgBaseUrlV2,
} from "@/common/config";
import Tab from "@/components/public/tabs/tab";

export default {
  mixins: [detailModule],
  components: {
    waveBall,
    xModal,
    popupLoading,
    Tab,
  },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    return {
      hasRenderChart: false,
      isLoadingFinish: false,
      imgBaseUrlV1,
      imgBaseUrlV0,
      imgBaseUrlV2,
      showTypeSelect: false,
      equipmentTypeOptions: [],
      isEditType: false,
      currentTypeName: "",
      showDelete: false,
      equipmentTypes: [],
      tabs: [
        // {
        //   text: "综合概况",
        //   cache: true,
        // },
        {
          text: "基础工况",
          cache: false,
        },
        {
          text: "油液指标",
          cache: false,
        },
        {
          text: "振动数据",
          cache: false,
        },
      ],
      currentTab: 0,
      mixinViewOptions: {
        getURL: "/device/basic",
        isPage: false,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: false,
      },
    };
  },
  async onLoad(e) {
    this.dataForm.id = e.id;
    this.$nextTick(async () => {
      this.open();
      this.initData();
    });
  },
  methods: {
    fetchComplete(err, data, res) {
      if (res.code !== this.$ERR_OK) return;
      this.dataInfo = data;
      uni.setNavigationBarTitle({
        title: "设备详情 - " + data.device_name,
      });
      data.service_end_time = data.service_end_time
        ? this.$moment(data.service_end_time).format("YYYY-MM-DD")
        : "";
      this.equipmentTypes = data.category;
    },
    onChangeTab(tab, index) {
      this.currentTab = index;
      if (!tab.cache) {
        tab.cache = true;
        this.tabs.splice(index, 1, tab);
      }
    },
    open() {
      this._time = +new Date();
      this.$refs.popup && this.$refs.popup.open();
    },
    async close() {
      let now = +new Date();
      let time = this._time;
      let t = now - time;
      if (t <= 1000 * 0.5) {
        await delayFunc(500 - t);
      }
      this.isLoadingFinish = true;
      this.$refs.popup && this.$refs.popup.close();
    },
    async initData() {
      await Promise.all([this.getDataInfo()]);
      this.close();
    },
    onClickLook() {
      console.log("???");
      Router.push({
        path: "/pages/equipment-digital-archives/equipment-digital-archives",
        query: {
          equipmentId: this.dataInfo.id,
        },
      });
    },
  },
  onPullDownRefresh() {
    this.open();
    this.initData();
  },
  onPageScroll: debounce(async function (e) {
    if (this.hasRenderChart || !this.$refs.base) return;
    if (typeof this.$refs.base.pageScroll === "function") {
      let data = await this.$refs.base.pageScroll(e.scrollTop);
      console.log(data.top, "?data.top");
      if (data.top > 200) {
        this.$refs.base.initChart();
        this.hasRenderChart = true;
      }
    }
  }, 30),
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

page, .page {
  min-height: calc(100vh - var(--window-top));
  background: #f6f6f6;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.cover-view {
  position: fixed;
  display: flex;
  width: 100%;
  height: 110rpx;
  left: 0;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  background: #fff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);

  .item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;

    .btn {
      display: block;
      width: 340rpx;
      margin: auto;
      height: 80rpx;
      line-height: 76rpx;

      &.btn-default {
        color: color-active;
        border-color: color-active;
      }
    }
  }
}

.white {
  background-color: #fff;
}

.page-head {
  padding: 1rpx 0 0;
}

.card-box {
  height: 308rpx;
  background: linear-gradient(134deg, #8792b6 0%, #687192 100%);
  border-radius: 10rpx;
  margin: 30rpx 24rpx;
  color: #fff;

  > .head {
    display: flex;
    height: 72rpx;
    line-height: 72rpx;
    background: #6b7495;
    border-radius: 10rpx 10rpx 0 0;
    align-items: center;
    padding: 0 40rpx;

    > .image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }

  > .body {
    display: flex;
    flex-direction: column;
    padding: 58rpx 40rpx;
    height: 236rpx;
    justify-content: space-between;

    > .title {
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      line-height: 52rpx;
    }

    > .ft {
      display: flex;

      > .item {
        flex: 1;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 36rpx;

        &:last-child {
          text-align: right;
        }

        .link {
          text-decoration: underline;
        }
      }
    }
  }
}

.panel {
  padding: 30rpx 0 130rpx;
}

.swiper {
  height: calc(100vh - var(--window-top) - 442rpx);

  .swiper-item {
    padding: 30rpx 0;
    overflow: auto;
  }
}
</style>